<template>
	<el-main>
		<el-table :data="tableData" border>
			<el-table-column
				prop="requestMethod"
				label="请求方法">
			</el-table-column>
			<el-table-column
				prop="requestIp"
				label="请求IP">
			</el-table-column>
			<el-table-column
				prop="methodName"
				label="方法名">
			</el-table-column>
			<el-table-column
				prop="executeTime"
				label="请求耗时">
				<template slot-scope="scope">
					{{scope.row.executeTime}}毫秒
				</template>
			</el-table-column>
			<el-table-column label="操作" fixed="right" width="102">
				<template slot-scope="scope">
					<el-button type="primary" size="small" 
						@click="getDetail(scope.row.logId)">
						查看详情
					</el-button>
				</template>
			</el-table-column>
		</el-table>
		<div class="page-block" v-if="params.totalCount > 0">
			<el-pagination
				background
				@size-change="handleSizeChange"
				@current-change="handleCurrentChange"
				:page-size="params.pageSize"
				:current-page.sync="params.currentPage"
				layout="total, prev, pager, next, jumper"
				:total="params.totalCount">
			</el-pagination>
		</div>
	</el-main>
</template>

<script>
	import { getSystemLogList } from '@/api/system_log.js'
	export default {
		data() {
			return {
				tableData: [],
				params: {
					// 当前页
					currentPage: 1,
					// 每页多少条
					pageSize: 10,
					// 统计总数
					totalCount: 0
				}
			}
		},
		mounted() {
			this.getSystemLogList();
		},
		methods: {
			// 获取列表
			getSystemLogList() {
				let _this = this;
				getSystemLogList(_this.params).then(function(res){
					if (res.code === 200) {
						_this.tableData = res.data.records;
						_this.params.totalCount = res.data.total;
					} else {
						_this.$message.error(res.msg);
					}
				})
			},
			// 每页多少条
			handleSizeChange(val) {
				this.params.pageSize = val;
				this.getSystemLogList();
			},
			// 当前页
			handleCurrentChange(val) {
				this.params.currentPage = val;
				this.getSystemLogList();
			},
			// 查看详情
			getDetail(logId) {
				this.$router.push({
					path: './detail',
					query: {'logId': logId}
				});
			}
		}
	}
</script>